import React, { useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts';
import io from 'socket.io-client'

function Student() {
    const ref = useRef();

    const [data, setData] = useState([])
    let Io = io("http://localhost:3000")
    const [num, setNum] = useState(0)
    useEffect(() => {
        (
            async () => {
                setTimeout(() => {
                    setNum(num => num + 1)
                }, 3000)
                Io.emit("postMessage", num)
                Io.on('data', res => {

                    let kong = []
                    res.list.forEach((item) => {
                        item.data.forEach((item1) => {
                            kong.push(item1.num)
                        })
                    });
                    setData(kong)
                })
                var chartDom = ref.current;
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    color: ['#FAD64D', '#0C9D73', '#1960FD', "#FC5F5E", "#A060FB"],
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['运动区', '宿舍区', '教学区', '吸烟区', '干饭区'],
                        textStyle: {
                            color: '#fff'
                        },
                        icon: "circle",
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {},
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', "14:00", "16:00", "18:00", "20:00", "22:00", "24:00"]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '运动区',
                            type: 'line',
                            data: data.slice(0, 12),
                            smooth: true,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    lineStyle: { width: 2.5 }
                                }
                            }
                        },
                        {
                            name: '宿舍区',
                            type: 'line',
                            data: data.slice(12, 25),
                            smooth: true,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    lineStyle: { width: 2.5 }
                                }
                            }
                        },
                        {
                            name: '教学区',
                            type: 'line',
                            data: data.slice(25, 39),
                            smooth: true,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    lineStyle: { width: 2.5 }
                                }
                            }
                        },
                        {
                            name: '吸烟区',
                            type: 'line',
                            data: data.slice(39, 52),
                            smooth: true,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    lineStyle: { width: 2.5 }
                                }
                            }
                        },
                        {
                            name: '干饭区',
                            type: 'line',
                            data: data.slice(52),
                            smooth: true,
                            showSymbol: false,
                            itemStyle: {
                                normal: {
                                    lineStyle: { width: 2.5 }
                                }
                            }
                        }
                    ]
                };
                option && myChart.setOption(option);
            }
        )()

    }, [num])
    return (
        <div className="stu-0" ref={ref}>

        </div>
    )
}

export default Student
